<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" >

<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
</head>
<script type="text/javascript" th:src="@{/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-3.3.7-dist/css/bootstrap.min.css}">
<script type="text/javascript" th:src="@{/js/bootstrap-treeview/bootstrap-treeview.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-treeview/bootstrap-treeview.min.css}">
<script type="text/javascript" th:src="@{/js/bootStrap-addTabs/bootstrap.addtabs.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootStrap-addTabs/bootstrap.addtabs.css}">
<script type="text/javascript" th:src="@{/js/bootstrap-table/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-table/bootstrap-table.min.css}">

<script type="text/javascript" th:src="@{/js/bootstrap-fileinput/js/fileinput.min.js}"></script>
<script th:src="@{/js/bootstrap-fileinput/js/locales/zh.js}"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<body >
<!-- 	导航栏 -->
<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">后台管理</a>
        </div>
    </div>

</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <div id="myTree"></div>
            <div id="he-plugin-simple"></div>
        </div>
        <div class="col-md-9">
            <div id="myTabs" >
                <!-- 新选项卡 -->
                <ul class="nav nav-tabs" id="tablist" >
                    <li role="presentation" class="active"><a href="#home"
                                                              role="tab" data-toggle="tab">欢迎</a></li>
                </ul>
                <!-- 选项卡下内容 -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <div id="main" style="width: 600px;height:400px;"></div>
                        <div id="main1" style="width: 600px;height:400px;"></div>
                        <div id="main2" style="width: 600px;height:400px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    $(function(){
        init()
        init1()
        init2()
        gettree()
    })
    function init2(){
        var myChart = echarts.init(document.getElementById('main2'),'light');
        $.ajax({
            url:"cha1",
            type:"get",
            dataType:"JSON",
            success:function(data){
                // alert(data)
                myChart.setOption({
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',    // 设置图表类型为饼图
                            radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                            roseType: 'area',
                            data:data
                        }
                    ]
                })
            }
        })
    }
    function init1(){
        //基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1'),'right');
        $.ajax({
            url:"cha",
            type:"get",
            dataType:"JSON",
            success:function(data){
                var arr = [];
                var arr1= [];
                for (var i = 0; i < data.length; i++) {
                    arr.push(data[i].product_name)
                    arr1.push(data[i].product_num)
                }
                var option = {
                    title: {
                        text: '线性图'//标题
                    },
                    tooltip: {},//提示信息
                    legend: {
                        data:['库存数量']
                    },
                    xAxis: {
                        data: arr
                    },
                    yAxis: {},
                    series: [{
                        name: '库存数量',
                        type: 'line',
                        data: arr1
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        })
    }
    function init(){
        //基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'),'light');
        $.ajax({
            url:"cha",
            type:"get",
            dataType:"JSON",
            success:function(data){
                var arr = [];
                var arr1= [];
                for (var i = 0; i < data.length; i++) {
                    arr.push(data[i].product_name)
                    arr1.push(data[i].product_num)
                }
                var option = {
                    title: {
                        text: '柱形图'//标题
                    },
                    tooltip: {},//提示信息
                    legend: {
                        data:['库存数量']
                    },
                    xAxis: {
                        data: arr
                    },
                    yAxis: {},
                    series: [{
                        name: '库存数量',
                        type: 'bar',
                        data: arr1
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        })
    }
    /**
     * 树tree
     */
    function gettree(){

        $.ajax({
            url:"getTree",
            data:{pid:1},
            dataType:"json",
            success:function(data){
                $("#myTree").treeview({
                    data:data,
                    onNodeSelected:function(eval,node){
                        $.addtabs.add({
                            id:node.id,
                            title:node.text,
                            url:node.url
                            //url:node.url
                        })
                    }
                })
            }
        })
        $.addtabs({iframeHeight:900});
    }
</script>
<script>
    WIDGET = {
        CONFIG: {
            "modules": "01234",
            "background": 1,
            "tmpColor": "FFFFFF",
            "tmpSize": 16,
            "cityColor": "FFFFFF",
            "citySize": 16,
            "aqiSize": 16,
            "weatherIconSize": 24,
            "alertIconSize": 18,
            "padding": "10px 10px 10px 10px",
            "shadow": "1",
            "language": "auto",
            "borderRadius": 5,
            "fixed": "false",
            "vertical": "middle",
            "horizontal": "center",
            "key": "895d60ef28344f628cb18f38731a2660"
        }
    }
</script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
</html>